<template>
	<view class="newgroup relative">
		<u-navbar :placeholder="true" leftIconColor="#fff" bgColor="transparent">
			<view class="u-nav-slot both-center" slot="left" @click="back()">
				<view class="cancel">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</view>
			</view>

			<view class="u-nav-slot" slot="right" v-if="hasLogin">
				<view class="row slgap1">
					<u-icon name="star" color="#fff" size="24"></u-icon>
					<u-icon name="search" color="#fff" size="24"></u-icon>
					<u-icon name="list" color="#fff" size="24"></u-icon>
				</view>
			</view>

		</u-navbar>
		<view class="hd relative">
			<image class="bg" :src="list.logo" mode="aspectFill"></image>
			<view class="top">
				<view class="col ver-center mid">
					<view class="row " v-if="list.userinfo">
						<view class="ask row relative">
							<view class="askhd" @click="showPopup(list.userinfo.id)">
								<image class="logo" :src="list.userinfo.headimg" mode=""></image>
							</view>
							<view class="box space-between hor-center">
								<view class="asks">
									去提问
								</view>
								<u-icon name="arrow-right" color="#fff" size="13"></u-icon>
							</view>
							<view class="opa"></view>
						</view>
					</view>
				</view>
				<view class="white"></view>
			</view>
		</view>
		<view class="tab-box">
			<view class="title-share">
				<view class="title text-overflow text-overflow1">
					{{list.name}}
				</view>
				<view class="share both-center">
						分享
				</view>
			</view>
			<view class="upgrade">
				试运营星球最多可加入50人，点击申请升级
			</view>
			<view class="tab">
				<u-tabs :list="list1" lineColor="transparent" :inactiveStyle="inactive" :activeStyle="active" :current="current"
					itemStyle="margin: 8px 12px 8px 0;font-size:12px;border-radius: 1vw;height:4vh; padding: 0; background: #f6f6f6; color:rgba(210, 210, 210, 1.0); font-weight:bold;"
					@change="tabchange">
					<view slot="right" style="border-left: 1px solid #f0f0f0;" @tap="$u.toast('插槽被点击')">
						<u-icon name="list-dot" size="28"></u-icon>
					</view>
				</u-tabs>
			</view>
			<view class="">
				<swiper :current="swiperCurrent" @change="transition" class="swipeHeiht">
					<swiper-item class="swiper-item mwidth" v-for="(item, index) in newslist" :key="index">
						<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="">
							<view class="zd">
								<Top />
								<block v-if="pyq.length==0">
									<u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
									</u-empty>
								</block>
								<block v-for="(item1,index1) in pyq" :key="item1.id">
									<Pyq @popup="showPopup" :date="item1" />
								</block>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="add both-center" v-if="hasLogin">
			<u-icon name="edit-pen-fill" color="#fff" size="24" bold></u-icon>
		</view>
		<Info :show="show" @send="close" ref="info" />
	</view>
</template>

<script>
	import Top from '@/components/g-top/g-top.vue'
	import Pyq from '@/components/pyq-card/pyq-card.vue'
	import Info from '@/components/info-popup/info-popup.vue'
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {
			Top,
			Pyq,
			Info,
		},
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				id: '',
				list: {},
				pyq: {},
				show: false,
				imgname: '',
				// imgurl: 'https://center.foshanlepin.com/upload/group/',
				active: {
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					background: '#4D4D4D',
					color: '#FFFFFF !important',
					borderRadius: '6px',
					padding: '1vh 3vw',
					fontSize: '13px'
				},
				inactive: {
					background: '#f6f6f6',
					padding: '1vh 3vw',
					borderRadius: '6px',
				},
				swiperCurrent: 0,
				current: 0,
				newslist: [{
					name: 'xx'
				}, {
					name: 'yy'
				}, {
					name: 'zz'
				}],
				list1: [{
					name: '全部',
				}, {
					name: '等我回答',
				}, {
					icon: 'integral',
					name: '精华'
				}, {
					name: '只看星主'
				}, {
					name: '分享'
				}, {
					name: '吐槽'
				}, ]
			}
		},
		onLoad(options) {
			this.id = options.groupID
			this.imgname = options.logo
			// console.log()
		},
		mounted() {
			this.getDate()
			setTimeout(() => {
				this.getPyq()
			}, 1000)
		},
		onShow() {
			this.getDate()
			setTimeout(() => {
				this.getPyq()
			}, 1000)
		},
		methods: {
			back() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			go() {

			},
			showPopup(e) {
				this.$refs.info.getDate(e, this.list.userinfo.id)
				// console.log(this.list)
				this.show = true
			},
			close() {
				this.show = false
			},
			//拿到tab栏的下标 绑定给轮播图的index
			tabchange(e) {
				// console.log(e);
				this.swiperCurrent = e.index;
			},
			//滑动swiper后的下标  绑定给tab栏index		
			transition(e) {
				// console.log(e);
				this.current = e.detail.current
			},
			async getDate() {
				const res = await this.$myRequest({
					url: '/groupdetails',
					method: 'POST',
					data: {
						id: this.id
					}
				})
				this.list = res.data.data[0]
				// console.log(res.data)
			},
			async getPyq() {
				const res = await this.$myRequest({
					url: '/allarticles',
					method: 'POST',
					data: {
						id: this.list.userinfo.id
					}
				})
				this.pyq = res.data.data
			}
		}
	}
</script>

<style scoped>
	.swipeHeiht {
		height: calc(100vh + 200px);
	}

	.u-nav-slot {
		z-index: 99;
	}

	.hd {
		width: 100%;
		margin-top: -100px;
		height: auto;
	}

	.hd,
	.bg {
		width: 100vw;
		height: 40vh;
	}


	.relative {
		width: 100%;
		height: auto;
	}

	.top {
		width: 100%;
		position: absolute;
		bottom: 30px;
		height: 70px;
		z-index: 2;
	}

	.mid {
		height: 70px;
		margin-left: 4vw;
	}

	.askhd {
		display: inline-block;
		height: 100%;
		width: 40%;
		text-align: center;
		padding-top: 1vw;
		z-index: 99;
		/* background-color: #fff; */
	}

	.logo {
		width: 7vw;
		height: 7vw;
		border-radius: 50%;
		border: 2px solid #fff;
	}

	.share {
		background: #616161;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		padding: 2px 8px;
		opacity: 0.7;
		border-radius: 20px;
		font-weight: normal;
		line-height: 25px;
		height: 25px;
		letter-spacing: 0px;
		color: #FFFFFF;
		border: 1px solid rgba(255, 255, 255, 0.8);
	}

	.ask {
		position: absolute;
		width: 30vw;
		height: 10vw;
		border-radius: 8vw;
		bottom: 2vw;
		border: 1px solid rgba(255, 255, 255, 0.7);
	}


	.box {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		font-weight: normal;
		opacity: 0.9;
		letter-spacing: 1px;
		color: #fff;
		z-index: 1;
		width: 50%;
		background: transparent;
	}

	.opa {
		position: absolute;
		top: 0;
		height: 0;
		width: 100%;
		height: 100%;
		opacity: .2;
		border-radius: 8vw;
		background: #d8d8d8;
		backdrop-filter: blur(50px);
	}

	/* tabs */
	.tab-box {
		width: 100%;
		padding: 0 16px;
	}
	
	.title-share {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-family: PingFangSC-Semibold;
		font-size: 18px;
		font-weight: 700;
		/* line-height: 20px; */
		letter-spacing: 0px;
		color: #000;
		width: 150px;
	}
	
	.share {
		background: #e7f7f4;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		border-radius: 8vw;
		font-weight: 800;
		height: 8vw;
		width: 8vh;
		letter-spacing: 0px;
		color: #12b38e;
		border: 1px solid rgba(255, 255, 255, 0.8);
	}

	.upgrade {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		border-radius: 2vw;
		font-weight: 700;
		width: 100%;
		height: 5vh;
		line-height: 5vh;
		color: #fca754;
		margin: 2vh 0 1vh 0;
		background-color: #fdf6f0;
		text-align: start;
		padding-left: 5vw;
	}

	.mwidth {
		/* padding: 0 16px; */
		box-sizing: border-box;
	}

	.zd {
		margin: 2vh 0;
		border-top: 1px solid #F6F6F6;
	}

	.white {
		width: 100%;
		margin-top: 12px;
		height: 15px;
		border-radius: 30px 30px 0 0;
		background: #fff;
	}

	/*  */
	.add {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: #17B99A;
		position: fixed;
		bottom: 9%;
		right: 20px;
		box-shadow: 0 15px 20px #c4eee4;
	}

	.wx {
		margin-left: 20px;
	}
</style>
